<template>
	<view>
		<uamhead :title="title"></uamhead>
		<view  class="player">
			<view></view>
			<text class="iconfont iconbofang" @click="playing" :hidden="isplaying"></text>
			<text class="iconfont iconpause" @click="paused" :hidden="!isplaying"></text>	
			<image :src="song.picUrl" :class="{ 'run' : isplaying  }" mode=""></image>
			<!-- -->
		</view>
		<text class="iconfont iconlike" @click="save"></text>
		<unicloud-db v-slot:default="{data, loading, error, options}" collection="favoriSongs">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				{{data}}
			</view>
		</unicloud-db>
		</unicloud-db>
		<scroll-view class="lyric" scroll-y="true">

			<view class="wrap"  :style="{ transform : 'translateY(' +  - (lyricIndex - 1) * 82  + 'rpx)' }">
				<view class="item" :class="{ active : lyricIndex == index}" v-for="(item,index) in song.lyric" :key="index">
					{{ item.lyric}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {songDetail,songUrl,songLyric} from '../../common/api.js';
	export default {
		data() {
			return {
				title:'hahaha',
				song:{
					id:'',
					name:'',
					artist:'',
					picUrl:'',
					songUrl:'',
					lyric:''
				},
				isplaying:false,
				innerAudioContext:{},
				lyricIndex : 0
			}
		},
		onLoad(option) {
			this.song.id=option.songId;
			songDetail(this.song.id).then(res=>{
				let s=res.data.songs[0]
				this.song.name=s.name
				this.song.id = s.id
				this.song.artist=s.ar[0].name
				this.song.picUrl=s.al.picUrl
			});
			songUrl(this.song.id).then(res=>{
				this.song.songUrl=res.data.data[0].url;
			});
			songLyric(this.song.id).then(res=>{
				let lyric=res.data.lrc.lyric
				let result = [];
				let re = /\[([^\]]+)\]([^[]+)/g;
				lyric.replace(re,($0,$1,$2)=>{
					result.push({ time : this.formatTimeToSec($1) , lyric : $2 });
				});
				this.song.lyric = result;
			});
			setTimeout(()=>{this.initIAC()},500);
		},
		methods: {
			initIAC(){
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;
				innerAudioContext.src = this.song.songUrl;
				innerAudioContext.onPlay(() => {
				  this.listenLyricIndex();
				});
				this.innerAudioContext=innerAudioContext;
				this.isplaying=false;
			},
			playing(){
				this.innerAudioContext.play()
				this.isplaying=true;

			},
			paused(){
				this.innerAudioContext.pause()
				this.isplaying=false;
			},
			save(){
				const db = uniCloud.database();
				db.collection("favoriSongs").add({name:this.song.name})
			},
			formatTimeToSec(time){
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},
			listenLyricIndex(){
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					for(var i=0;i<this.song.lyric.length;i++){
						if( this.song.lyric[this.song.lyric.length-1].time < this.innerAudioContext.currentTime ){
							this.lyricIndex = this.song.lyric.length-1;
							break;
						}
						if( this.song.lyric[i].time < this.innerAudioContext.currentTime && this.song.lyric[i+1].time > this.innerAudioContext.currentTime ){
							this.lyricIndex = i;
						}
					}
				});
			}
		}
	}
</script>

<style>
.player{ width:580rpx; height:580rpx; background:url(~@/static/disc.png);background-size:cover;   margin:210rpx auto 44rpx auto; position: relative;}
.player view{ position: absolute; width:170rpx; height:266rpx; position: absolute; left:60rpx; right:0;  margin:auto; top:-170rpx; background:url(~@/static/needle.png); background-size:cover;}
.player text{ width:100rpx; height:100rpx; font-size:100rpx; position: absolute; left:0; top:0; right:0; bottom:0; margin:auto; color:black;z-index: 5;}
@keyframes move{
	from{ transform : rotate(0deg);}
	to{ transform : rotate(360deg);}
}
.player image{ width:380rpx; height:380rpx; border-radius: 50%; position: absolute; left:0; top:0; right:0; bottom:0; margin:auto; z-index: 3;
	animation:10s linear infinite move; animation-play-state: paused;}
.player .run{ animation-play-state: running;}
.lyric{ height:246rpx; line-height: 82rpx; font-size:32rpx; text-align: center; color:#949495; overflow: hidden;}
.active{ color:blue;}
.lyric .wrap{ transition: .5s;}
.lyric .item{ height:82rpx;}
</style>
